<template>
  <div class="finance-info-page">
    <el-card shadow="always">
      <div slot="header" class="clearfix">
        <line-header title="充值总览"></line-header>
      </div>
      <div class="page-card-body">
        <div class="top-page-box">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="top-show-content-box">
                <div class="show-content-top">
                  <div class="top-show-title">充值总额</div>
                </div>
                <div class="show-content-bottom">
                  <div class="top-show-num">￥{{totalInAmount.toFixed(2)}}</div>
                  <div class="top-show-dec">总金额</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="top-show-content-box">
                <div class="show-content-top">
                  <div class="top-show-title">已消费金额</div>
                </div>
                <div class="show-content-bottom">
                  <div class="top-show-num">￥{{customAmount.toFixed(2)}}</div>
                  <div class="top-show-dec">总金额</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="top-show-content-box">
                <div class="show-content-top">
                  <div class="top-show-title">账户金额</div>
                </div>
                <div class="show-content-bottom">
                  <div class="top-show-num">￥{{ balance.toFixed(2)}}</div>
                  <div class="top-show-dec">总金额</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="bottom-page-box">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="充值记录" name="one">
              <info-table></info-table>
            </el-tab-pane>
            <el-tab-pane label="消费记录" name="two">
              <consume-table></consume-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import lineHeader from "@/components/line-header/index";
import ConsumeTable from "./consume-table.vue";
import InfoTable from "./recharge-table.vue";
import {mapGetters} from "vuex"
export default {
  components: { InfoTable, ConsumeTable, lineHeader },
  props: {},
  data() {
    return {
      activeName: "one"
    };
  },
  filters: {

  },
  watch: {},
  computed: {
    ...mapGetters([
      'balance',
      'totalInAmount',
      'customAmount',
    ])
  },
  methods: {
    handleClick(tab, event) {}
  },
  created() {

  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.page-card-body {
  .top-page-box {
    .top-show-content-box {
      text-align: left;
      background: url('../../../assets/summary/bg1.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 10px;
      color: white;

      .show-content-top {
        padding: 20px 30px 0 30px;
      }
      .show-content-bottom {
        padding: 40px 30px 20px 30px;
      }
      .top-show-title,
      .top-show-dec {
        font-size: 14px;
      }
      .top-show-num {
        font-size: 30px;
        font-family: DINNextW1G;
        font-weight: 400;
        margin-bottom: 10px;
      }
    }
  }
  .bottom-page-box {
    margin-top: 30px;
  }
}
</style>
